<template>
  <div class="material_state">
    <span class="block_label_color small_label font_block"
          :class="stateColor">{{data.materialRequestStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'MaterialState',
  props: {
    data: Object
  },
  computed: {
    // 根据工单状态返回相应class
    stateColor() {
      switch (this.data.materialRequestStatusValue) {
        case 'Request':
          // 要料中
          return 'material_state_request'
        case 'Transit':
          // 配送中
          return 'material_state_transit'
        case 'Received':
          // 已收料
          return 'material_state_received'
        case 'Cancel':
          // 已撤销
          return 'material_state_cancel'
        case 'Refused':
          // 未通过
          return 'material_state_refused'
        case 'ToBeApproved':
          // 待审核
          return 'material_state_approved'
        case 'Fail':
          // 待审核
          return 'material_state_fail'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 要料状态颜色 */
  // 要料中
  @materialStateRequest: #00b4ff;
  // 配送中
  @materialStateTransit: #ff931f;
  // 已收料
  @materialStateReceived: #00a949;
  // 已撤销
  @materialStateCancel: #7e8e9f;
  // 未通过
  @materialStateRefused: #3c4a63;
  // 待审核
  @materialStateApproved: #fb6676;
  // 失败
  @materialStateFail: #f8000f;
  .material_state{
    .block_label_color{
      /*要料状态*/
      // 要料中
      color: #fff!important;
      &.material_state_request{
        background-color: @materialStateRequest;
      }
      // 配送中
      &.material_state_transit{
        background-color: @materialStateTransit;
      }
      // 已收料
      &.material_state_received{
        background-color: @materialStateReceived;
      }
      // 已撤销
      &.material_state_cancel{
        background-color: @materialStateCancel;
      }
      // 未通过
      &.material_state_refused{
        background-color: @materialStateRefused;
      }
      // 待审核
      &.material_state_approved{
        background-color: @materialStateApproved;
      }
      // 失败
      &.material_state_fail{
      background-color: @materialStateFail;
    }
    }
  }
</style>
